﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3旋转效果-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
	perspective:1600px;
	background:#ffa5a5;
}
.bigBox {
	width:200px;
	height:300px;
	margin:300px auto 0 auto;
	position:relative;
	transform-style:preserve-3d;
	transform:rotateY(0deg) rotateZ(0deg);
	animation:bgBox 15s linear infinite;
}
.bigBox>div {
	width:100%;
	height:100%;
	opacity:0.9;
	background-color:skyblue;
	line-height:150px;
	text-align:center;
	font-size:30px;
	position:absolute;
	top:0;
	left:0;
}
.bigBox>div:nth-child(1) {
	/* background-color:rgb(0,183,255);
	*/
    background:url(./img/1.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:translateZ(500px);
}
.bigBox>div:nth-child(2) {
	background:url(img/2.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(36deg) translateZ(500px);
}
.bigBox>div:nth-child(3) {
	background:url(img/3.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(72deg) translateZ(500px);
}
.bigBox>div:nth-child(4) {
	background:url(img/4.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(108deg) translateZ(500px);
}
.bigBox>div:nth-child(5) {
	background:url(img/5.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(142deg) translateZ(500px);
}
.bigBox>div:nth-child(6) {
	background:url(img/6.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(178deg) translateZ(500px);
}
.bigBox>div:nth-child(7) {
	background:url(img/7.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(214deg) translateZ(500px);
}
.bigBox>div:nth-child(8) {
	background:url(img/8.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(250deg) translateZ(500px);
}
.bigBox>div:nth-child(9) {
	background:url(img/9.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(286deg) translateZ(500px);
}
.bigBox>div:nth-child(10) {
	background:url(img/10.jpg) 0 0 no-repeat;
	background-size:100% 100%;
	transform:rotateY(322deg) translateZ(500px);
}
@keyframes bgBox {
	0% {
	transform:rotateY(0deg)
}
100% {
	transform:rotateY(360deg)
}
}



.chest {
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
}
.heart {
	position:absolute;
	z-index:2;
	background:linear-gradient(-90deg,#F50A45 0%,#d5093c 40%);
	animation:beat 0.7s ease 0s infinite normal;
}
.heart.center {
	background:linear-gradient(-45deg,#B80734 0%,#d5093c 40%);
}
.heart.top {
	z-index:3;
}
.sided {
	top:100px;
	width:220px;
	height:220px;
	border-radius:110px;
}
.center {
	width:210px;
	height:210px;
	bottom:100px;
	left:145px;
	transform:rotateZ(225deg);
}
.left {
	left:62px;
}
.right {
	right:62px;
}
@keyframes beat {
	0% {
	transform:scale(1) rotate(225deg);
	box-shadow:0 0 40px #d5093c;
}
50% {
	transform:scale(1.1) rotate(225deg);
	box-shadow:0 0 70px #d5093c;
}
100% {
	transform:scale(1) rotate(225deg);
	box-shadow:0 0 40px #d5093c;
}
}

</style>
</head>
<body>
<div class="bigBox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="chest">
    <div class="heart left sided top"></div>
    <div class="heart center"></div>
    <div class="heart right sided"></div>
</div>

<script>

</script>

</body>
</html>
